<script setup>
import {inject, ref} from "vue";
import {delCommentById, delProductLogicAPI, getCommentById} from "@/api/product.js";
import {getDateTimeFormatNow} from "@/utils/DateUtils.js";
import {WAIT_DELIVERY} from "@/constants/OrderStatus.js";
import {useRouter} from "vue-router";

const router = useRouter()
const {productDetailVisible, searchByCondition} = inject('productDetail')

const props = defineProps({
  product: {type: Object, default: null}
})

// 逻辑删除
const delProductLogic = async () => {
  const res = await delProductLogicAPI(props.product.id)
  if (res) {
    // 重新查询信息
    searchByCondition()
    // 关闭商品详情
    productDetailVisible.value = false
  }
}
const delProductLogicHandler = () => {
  ElMessageBox.confirm(
      `是否确认删除商品：${props.product.title}`,
      '删除商品',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 逻辑删除商品
    delProductLogic()
  }).catch(() => {

  })
}

const dialogCommentVisible = ref(false)
const commentList = ref([])
const showDialogComment = async () => {
  commentList.value = await getCommentById(props.product.id)
  dialogCommentVisible.value = true
}

const onRemoveComment = async (commentId) => {
  ElMessageBox.confirm(
      `是否确认删除商品评论`,
      '删除商品评论',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    console.log(commentId)
    // 逻辑删除商品
    const res = await delCommentById(commentId)
    if (res) {
      dialogCommentVisible.value = false
    }
  }).catch(() => {
  
  })
}
</script>

<template>
  <div class="product-detail">
    <el-drawer
        append-to-body
        lock-scroll
        size="63%"
        v-model="productDetailVisible"
        direction="ltr"
    >
      <template #header>
        <span class="text-2xl text-gray-950">商品详情</span>
        <el-button v-if="!product?.isRemove" class="mr-2" type="danger" plain @click="delProductLogicHandler">删除商品</el-button>
        <el-button class="mr-12" type="primary" plain @click="showDialogComment">商品评论</el-button>
      </template>
      <el-form :inline="false" label-width="120px">
        <el-form-item label="商品 ID">
          <span>{{ product.id }}</span>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-image
              class="mr-4 mb-4"
              preview-teleported
              v-for="(img, idx) in product.imgs"
              style="width: 150px; height: 150px"
              :src="img.img"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="product.imgs.map(img => img.img)"
              :initial-index="idx"
              fit="cover"
          />
        </el-form-item>
        <el-form-item label="商品标题">
          <span>
            {{ product.title }}
            <el-tag size="small" type="danger" v-if="product.isRemove">{{product.isRemove ? '已删除' : '未删除' }}</el-tag>
          </span>
        </el-form-item>
        <el-form-item label="ISBN">
          <span>
            {{ product.code }}
          </span>
        </el-form-item>
        <el-form-item label="商品类别">
          <span>{{ product.productCategory }}/{{ product.productCategorySub }}</span>
        </el-form-item>
        <el-form-item label="商品标签">
          <el-tag
              class="mr-1"
              v-for="label in product.labels"
              :key="label" size="small" type="success"
          >
            <div class="tag-text truncate">{{ label.name }}</div>
          </el-tag>
        </el-form-item>
        <el-form-item label="商品销量">
          <span>{{ product.sale }}</span>
        </el-form-item>
        <el-form-item label="商品运费">
          <span>{{ product.freight }}</span>
        </el-form-item>
        <el-form-item label="商品发货地址">
          <span>{{ product.delivery }} {{ product.address }}</span>
        </el-form-item>
        <el-form-item label="商品选项">
          <el-table :data="product.options" style="width: 100%">
            <el-table-column prop="id" label="ID" width="50"/>
            <el-table-column prop="img" label="商品选项图片" width="150">
              <template #default="scope">
                <el-image
                    class="mr-4"
                    preview-teleported
                    v-if="product.options[scope.$index].img.length > 0"
                    style="width: 100px; height: 100px"
                    :src="product.options[scope.$index].img"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[product.options[scope.$index].img]"
                    fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商品选项名称"/>
            <el-table-column prop="price" label="价格" width="100">
              <template #default="scope">
                <span>{{ product.options[scope.$index].price }} ￥</span>
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="100"/>
          </el-table>
        </el-form-item>
        <el-form-item label="商品参数">
          <el-table :data="product.params" style="width: 100%">
            <el-table-column prop="id" label="ID" width="50"/>
            <el-table-column prop="name" label="商品参数名称" width="150"/>
            <el-table-column prop="val" label="商品参数说明"/>
          </el-table>
        </el-form-item>
        <el-form-item label="商品描述">
          <div class="product-detail-content" v-html="product.descriptionHtml"></div>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog v-model="dialogCommentVisible" title="商品评论">
      <el-table :data="commentList" style="width: 100%" scrollbar-always-on max-height="700">
        <el-table-column property="username" label="用户名" width="100" />
        <el-table-column label="用户头像" width="150">
          <template #default="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.avatar"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[scope.row.avatar]"
                :initial-index="0"
                hide-on-click-modal
                close-on-press-escape
                preview-teleported
                fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column property="score" label="评分" width="60" />
        <el-table-column property="content" label="评价" width="250" />
        <el-table-column label="评价图片" width="150">
          <template #default="scope">
            <el-image
                v-if="scope.row.commentsImg.length > 0"
                style="width: 100px; height: 100px"
                :src="scope.row.commentsImg[0].imgUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="scope.row.commentsImg.map(i => i.imgUrl)"
                :initial-index="0"
                hide-on-click-modal
                close-on-press-escape
                preview-teleported
                fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column label="发表时间" width="180">
          <template #default="scope">
            {{ getDateTimeFormatNow(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <div>
              <el-button
                  type="danger"
                  size="small"
                  @click="onRemoveComment(scope.row.id)"
              >删除评论
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.product-detail-content {
  h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: #333;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #333;
    margin-bottom: 16px;
  }

  h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
    margin-bottom: 16px;
  }

  h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #333;
    margin-bottom: 16px;
  }

  p {
    font-size: 14px;
    line-height: 24px;
    color: #333;
    margin-bottom: 16px;
  }
}
</style>